<template>
  <div class="vc-bg-gray-100 vc-py-2 vc-px-5 vc-flex vc-flex-row vc-items-center vc-shadow vc-relative vc-z-10">
    <div class="mr-6">
      <input
        v-model="title"
        class="
          vc-bg-transparent vc-font-semibold vc-text-lg
          focus:vc-outline-none
          vc-w-36 vc-py-2 vc-border-transparent vc-border-b
          focus:vc-border-blue-700
          vc-overflow-hidden vc-overflow-ellipsis vc-whitespace-nowrap
        "
        @blur="titleBlur"
        @focus="titleFocus"
      />
    </div>
    <div class="vc-relative vc-overflow-visible" @mouseenter="showFileMenu = true" @mouseleave="showFileMenu = false">
      <div
        class="vc-px-2 vc-py-1 hover:vc-bg-gray-300 vc-cursor-pointer vc-rounded"
        :class="{ 'vc-bg-gray-300': showFileMenu }"
      >
        文件
      </div>
      <div
        v-show="showFileMenu"
        class="vc-absolute vc-top-full vc-left-0 vc-bg-white vc-shadow-md vc-rounded vc-overflow-hidden"
      >
        <div
          class="vc-px-8 vc-py-2 hover:vc-bg-blue-500 hover:vc-text-white vc-cursor-pointer vc-whitespace-nowrap"
          @click="clearData"
        >
          清空
        </div>
        <div
          class="vc-px-8 vc-py-2 hover:vc-bg-blue-500 hover:vc-text-white vc-cursor-pointer vc-whitespace-nowrap"
          @click="showImportWin"
        >
          导入
        </div>
      </div>
    </div>
    <div class="vc-flex-1 vc-text-right">
      <button class="vc-btn vc-btn-xl vc-btn-blue vc-mr-2" @click="viewExample1">预览示例1</button>
      <button class="vc-btn vc-btn-xl vc-btn-blue" @click="exportData">保存</button>
    </div>
    <Dialog v-model:visible="importWinVisible" title="示例数据">
      <div
        v-for="(el, name) in exampleData"
        :key="name"
        class="vc-py-3 vc-px-8 vc-text-lg hover:vc-bg-blue-500 hover:vc-text-white vc-cursor-pointer"
        @click="importData(el as ConfigurationJSON);importWinVisible = false;"
      >
        {{ name }}
      </div>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import { inject, ref } from "vue";
import type { ConfigurationJSON } from "/@/components/types";
import example1 from "/@/assets/data/example1.json";
import example2 from "/@/assets/data/example2.json";
import example3 from "/@/assets/data/example3.json";
import example4 from "/@/assets/data/example4.json";
import { useData } from "./useData";
import { RootCommon, RootCommonKey } from "./types";
import Dialog from "/@/components/base/Dialog.vue";

const { cid } = inject(RootCommonKey) as RootCommon;

const exampleData = {
  example1,
  example2,
  example3,
  example4,
};

const { clearData, importData, exportData } = useData();

const title = ref("未命名");
function titleBlur() {
  if (!title.value) {
    title.value = "未命名";
  }
}
function titleFocus(e: FocusEvent) {
  const inputEl = e.target as HTMLInputElement;
  inputEl.select();
}
const showFileMenu = ref(false);

const importWinVisible = ref(false);
function showImportWin() {
  importWinVisible.value = true;
}
function viewExample1() {
  location.href = "/vue-configuration/example-apply/index.html";
}
</script>
